<template>
	<div class="sub-nav">
		<div class="sub-nav-wrap">
			<router-link to="#" tag="div" class="sub-nav-item">
				<i class="ion-fireball"></i><br>
				HOT
			</router-link>
			<router-link to="#" tag="div" class="sub-nav-item">
				<i class="ion-ios-clock"></i><br>
				TIME
			</router-link>
			<router-link to="#" tag="div" class="sub-nav-item">
				<i class="ion-social-youtube"></i><br>
				SMALL
			</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		data () {
			return {

			}
		}
	}
</script>

<style lang="sass" scoped>
	$icon-color: #596990;
	.sub-nav {
		position: relative;
		padding: 0 30px;
		margin: -30px 0 15px 0;

		.sub-nav-wrap {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 80px;
			margin: 0 auto;
			background: rgba(255, 255, 255, .95);
			box-shadow: 0px 3px 16px -5px  $icon-color;
			border-radius: 10px;
			
			.sub-nav-item {
				text-align: center;
				color: $icon-color;
				font-size: 16px;

				i {
					font-size: 20px;
				}
			}
		}
	}
	
</style>